<template>
  <div class="container">
    <FormSearch :form-item="formItem" :form-data="formData" @searchForm="getList" @clearForm="clearForm"/>
    <div class="btn-list">
      <el-button type="primary" icon="Plus" @click="addReturn">新增零售退货</el-button>
    </div>
    <Table
      :table-head="tableHead"
      :table-data="tableData"
      :operation="['view','edit','del','submit']"
      :total="total"
      :list-loading="listLoading"
      style="height:calc(100vh - 250px);"
      @handleView="handleView"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      @handleSubmit="handleSubmit"
      @paginationChange="paginationChange"
    />
    <AddForm ref="AddFormRef"/>
    <Detail ref="DetailRef"/>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { formItem, tableHead } from './js/retail-return-var'
import { ElMessage, ElMessageBox } from 'element-plus'
import Table from '@/components/Table/BaseTable.vue'
import AddForm from './common/RetailReturnForm.vue'
import FormSearch from '@/components/Form/FormSearch.vue'
import Detail from './common/RetailReturnDetail.vue'

const formData = reactive({ 
  returnNo: '', 
  customerName: '', 
  status: '', 
  startDate: '', 
  endDate: '' 
})
const AddFormRef = ref(null)
const DetailRef = ref(null)

const listLoading = ref(true)
const tableData = reactive([])
const total = ref(0)

onMounted(() => {
  getList()
})

// 模拟数据
const mockData = () => {
  const data = []
  for (let i = 0; i < 20; i++) {
    data.push({
      id: i + 1,
      returnNo: `RR${String(i + 1).padStart(6, '0')}`,
      orderNo: `RO${String(i + 1).padStart(6, '0')}`,
      customerName: `客户${i + 1}`,
      customerPhone: `1380013800${i}`,
      totalAmount: (Math.random() * 500).toFixed(2),
      status: ['待提交', '已提交', '已完成'][Math.floor(Math.random() * 3)],
      createTime: `2024-01-${String(Math.floor(Math.random() * 28) + 1).padStart(2, '0')} ${String(Math.floor(Math.random() * 24)).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`,
      creatorName: 'admin',
      remark: `零售退货单${i + 1}备注`
    })
  }
  return data
}

function addReturn() {
  AddFormRef.value.open()
}

function handleView(row) {
  DetailRef.value.openDialog(row)
  console.log('查看', row)
}

function handleEdit(row) {
  AddFormRef.value.open(row)
  console.log('编辑', row)
}

function handleDelete(row) {
  console.log('删除', row)
  ElMessageBox({
    title: '提示',
    message: '确定要删除该零售退货单吗?',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    callback: (action) => {
      if (action === 'confirm') {
        ElMessage.success('删除成功')
        getList()
      }
    }
  })
}

function handleSubmit(row) {
  console.log('提交', row)
  ElMessageBox({
    title: '提示',
    message: '确定要提交该零售退货单吗?',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    callback: (action) => {
      if (action === 'confirm') {
        ElMessage.success('提交成功')
        getList()
      }
    }
  })
}

function getList(val) {
  listLoading.value = true
  console.log('查询数据', val)
  
  // 模拟API调用
  setTimeout(() => {
    tableData.length = 0
    const data = mockData()
    tableData.push(...data)
    total.value = data.length
    listLoading.value = false
  }, 500)
}

function clearForm() {
  console.log('清除数据')
  getList()
}

function paginationChange(data) {
  console.log('页码变化', data)
  getList()
}
</script>

<style scoped lang="less">
.container{
  .btn-list{
    margin-bottom: 10px;
    display: flex;
    flex-direction: row-reverse;
  }
}
</style> 